Angular Modules

The angular Module is used to group components, directives, pipes and services based on their functionality. Angular by default provide us with a default module which is AppModule.

The app.module.ts file will contain the following default code.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Any class that is decorated with @NgModule will act as a module in angular application. This module will be having some metadata information. They are

• declarations
• imports
• providers
• bootstrap

The declarations array will hold the list of components, directives and pipes used in the particular module.

The import array will be holding the list of modules used in the application. Without importing any module we cannot use its functionality. It's like registering all the modules in the import array.

If you need to add ReactiveForms in your application then we need to import ReactiveFormsModule and add it to imports array.

The providers array will be holding the list of services that should be available to the entire application.

The bootstrap will define which component to be loaded initially.

The app.module.ts will be set as a default module by angular in main.ts file.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Angular allows us to create custom module. A module can be created using the below angular CLI command.

ng g m employee

Here g stands for generate, m stands for module and employee is the name of the module. Executing the above command will create a module with the following code.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class EmployeeModule { }

Now we can create components that are related to the employee and add it to the declarations array and finally import the EmployeeModule to the app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeModule } from './employee/employee.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    EmployeeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the EmployeeModule is imported in AppModule we can use the selector string of components in EmployeeModule in components in AppModule.

We can also perform routing to the components in EmployeeModule from AppRoutingModule.

In our next article, we shall see how to add multiple components in our EmployeeModule and add routing to those components.